<template>
  <n-modal :show="show" style="width: 500px" @mask-click="close">
    <n-card size="medium" title="修改密码" :bordered="false">
      <n-form label-placement="left" :model="changePasswordRequest">
        <n-form-item label="旧密码" path="oldPassword">
          <n-input
            v-model:value="changePasswordRequest.oldPassword"
            type="password"
            show-password-on="mousedown"
            placeholder="请输入旧密码"
            autocomplete="new-password"
          />
        </n-form-item>
        <n-form-item label="新密码" path="newPassword">
          <n-input
            v-model:value="changePasswordRequest.newPassword"
            type="password"
            show-password-on="mousedown"
            placeholder="请输入新密码"
          />
        </n-form-item>
      </n-form>
      <template #footer>
        <n-space justify="end">
          <n-button @click="close">取消</n-button>
          <n-button type="primary" style="margin-left: 10px" @click="changePassword">确认</n-button>
        </n-space>
      </template>
    </n-card>
  </n-modal>
</template>

<script lang="ts" setup>
import { type ChangePasswordRequest, doChangePassword } from "../../api/passport-api"
import { ref } from "vue"
import { useMessage } from "naive-ui"

const props = defineProps({
  show: {
    type: Boolean,
    required: true
  },
  close: {
    type: Function,
    required: true
  }
})

const message = useMessage()

const changePasswordRequest = ref<ChangePasswordRequest>({
  oldPassword: "",
  newPassword: ""
})

function changePassword() {
  console.log(changePasswordRequest.value)
  doChangePassword(changePasswordRequest.value).then((res) => {
    if (res) {
      message.success("密码修改成功!")
      props.close()
    }
  })
}
</script>

<style scoped lang="scss"></style>
